<template>
  <div>
    <van-nav-bar title="用户信息" left-arrow @click-left="onClickLeft" />
    <van-swipe-cell>
      <van-row>
        <van-col span="8" class="b">头像</van-col>
        <van-col span="8"></van-col>
        <van-col span="8" class="logins-image" >
          <van-uploader :after-read="afterRead">
            <van-image round width="4rem" height="4rem" :src="img" />
          </van-uploader>
        </van-col>
      </van-row>
      <van-cell :border="true" title="用户名" :value="username" />
      <van-nav-bar :right-text="username +'>'" left-arrow @click-right="Username">
        <span slot="left">昵称</span>
      </van-nav-bar>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

      <van-nav-bar :right-text="gender +'>'" left-arrow @click-right="onClickRight">
        <span slot="left">性别</span>
      </van-nav-bar>

      <van-nav-bar :right-text="regtime" left-arrow>
        <span slot="left">注册日期</span>
      </van-nav-bar>

      <van-cell :border="true" title="推荐码" value="Xck9vfhL" />
      <van-cell :border="true" title="推荐人" value="无" />

      <van-nav-bar right-text=">" left-arrow class="a">
        <span slot="left">收货管理地址</span>
      </van-nav-bar>

      <van-nav-bar right-text="安全等级:中 >" left-arrow class="a" @click-right="Password">
        <span slot="left">账户安全</span>
      </van-nav-bar>

      <van-nav-bar :right-text="pay_password+'>'" left-arrow class="a" @click-right="Paypassword">
        <span slot="left">支付密码</span>
      </van-nav-bar>

      <van-nav-bar right-text=">" left-arrow class="a">
        <span slot="left">美店授权</span>
      </van-nav-bar>

      <van-nav-bar right-text="反馈 更多" left-arrow class="a">
        <span style="color:#0b96f2" slot="left">
          {{mobile}} |
          <span @click="logout">退出</span>
        </span>
      </van-nav-bar>
    </van-swipe-cell>
    <img src="../assets/image/botom.png" alt />
  </div>
</template>

<script>
export default {
  data () {
    return {
      mobile: '',
      //   选择性别
      show: false,
      actions: [{ name: '男' }, { name: '女' }],
      gender: '',
      regtime: '',
      img: '',
      username: '',
      pay_password: ''
    }
  },
  created () {
    //   获取手机号码
    this.mobile = sessionStorage.getItem('mobile')
    // 获取注册时间
    this.getRegTime()
    // 获取用户头像
    this.getImage()
    // 获取用户性别
    this.getGender()
    // 获取用户昵称
    this.getUsername()
    // 获取支付密码
    this.getPaypassword()
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    // 显示性别弹窗
    onClickRight () {
      this.show = true
    },
    // 选择性别
    async onSelect (item) {
      this.show = false
      const { data: res } = await this.$http.post('/upGender', { mobile: this.mobile, gender: item.name })
      if (res.ok === 1) {
        this.getGender()
      }
    },
    // 获取时间戳
    async getRegTime () {
      const { data: res } = await this.$http.get('/regtime', {
        params: { mobile: this.mobile }
      })
      var timestamp4 = new Date(res.data[0].regtime)
      this.regtime =
        timestamp4.toLocaleDateString().replace(/\//g, '-') +
        ' ' +
        timestamp4.toTimeString().substr(0, 8)
    },
    // 退出
    logout () {
      sessionStorage.clear()
      this.$router.push('/login')
    },
    async afterRead (file) {
      let src = file.file
      // console.log(src)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let formdate = new FormData()
      formdate.append('img', src)
      formdate.append('mobile', this.mobile)
      const { data: res } = await this.$http.post('/upImage', formdate, config, { 'mobile': this.mobile })
      // console.log(res)
      if (res.ok === 1) {
        // console.log(res)

        this.img = res.img
        this.getImage()
      }
      // console.log(res.ok)
    },
    Username () {
      this.$router.push('/username')
    },
    Password () {
      this.$router.push('/password')
    },
    Paypassword () {
      this.$router.push('/paypassword')
    },
    // 获取头像
    async getImage () {
      const { data: res } = await this.$http.get('/image', {
        params: { mobile: this.mobile }
      })
      this.img = res.data[0].image
    },
    // 获取性别
    async getGender () {
      const { data: res } = await this.$http.get('/gender', {
        params: { mobile: this.mobile }
      })
      if (res.data[0].gender === null) {
        this.gender = '未填写'
      } else {
        this.gender = res.data[0].gender
      }
    },
    // 获取昵称
    async getUsername () {
      const { data: res } = await this.$http.get('/username', {
        params: { mobile: this.mobile }
      })
      if (res.data[0].username === null) {
        this.username = '未填写'
      } else {
        this.username = res.data[0].username
      }
    },
    // 获取支付密码
    async getPaypassword () {
      const { data: res } = await this.$http.get('/payPassword', {
        params: { mobile: this.mobile }
      })
      if (res.data[0].pay_password === null) {
        this.pay_password = '立即设置'
      } else {
        this.pay_password = '修改支付密码'
      }
    }
  }
}
</script>

<style lang='less'>
body{
  background-color: #fff;
}
.a {
  margin-top: 15px;
}
.logins-image{
        padding-left: 13%;
}
.b{
     margin-top: 6%;
    padding-left: 4%;
}
</style>
